<template>
    <van-nav-bar
    title="优惠卷" left-text="返回" left-arrow fixed placeholder z-index="1000" @click-left="back" />

    <van-pull-refresh v-model="refreshing" @refresh="OnRefresh">  
      <van-list
      v-model:loading="loading"   
      :finished="finished"
      finished-text="没有更多了"
      @load="OnLoad"
    >   

    <div class="coupon_list">
      <div class="coupon_item" v-for="item in CouponList" :key="item.id">
          <div class="item_content">
              <router-link to="/coupon/info">
                  <div class="left">{{  item.coupon.rate*10 }}<span>折</span></div>
                  <div class="right">
                      <div>{{  item.coupon.title }}</div>
                      <div>订单满<span>100元</span>打<span>8折</span></div>
                      <div>每人限领1张</div>
                      <div>领取后10天内有效{{  item.coupon.endtime_text }}</div>
                  </div>
              </router-link>
          </div>
          <div class="item_btn">
              <a class="right_btn">优惠详情</a>
          </div>
      </div>
    </div>
    
</van-list>
</van-pull-refresh>
    <Tabbar />
  </template>
  
  <script setup>

    const {proxy} = getCurrentInstance() // 获取当前实例

    let business = proxy.$business // 获取业务逻辑
    const CouponList = ref([]);   // 购物车列表
    const refreshing = ref(false);  // 是否正在刷新
    const finished = ref(false);   //是否加载完毕
    const loading = ref(false);   // 是否加载中
    const page = ref(1);  // 页码


    const CouPonInfo = () =>proxy.$router.push({path:'/coupon/info',query})

    const OnRefresh = () => {
    //清空查询参数
    finished.value = false;
    page.value = 1;
    CouponList.value = [];
    loading.value = true;

    //加载数据方法
    //setTimeout JavaScript内置函数，用于延迟执行代码,OnLoad	要延迟执行的函数名称（需已定义）
    setTimeout(OnLoad,1500);
    
  }

  const back = () => proxy.$router.push('/business')
  const OnLoad = async () => {  //async	声明函数为异步函数，允许使用 await 关键字
    //如果等于true说明当期进行下拉刷新
    if(refreshing.value){
      //结束下拉刷新
      refreshing.value = false;
    }

    //组装数据
    let params = {
        busid: business.value.id
    }
    

    var result = await proxy.$POST({url:'/business/coupon',params})

    if(result.code == 0) //如果请求失败
    {
      proxy.$fail(result.msg) //提示错误信息
      finished.value = true; //没有更多数据
    }
    CouponList.value = result.data.list
    finished.value = true;
}
  </script>
  
  <style scoped>
    @import url('/assets/css/CouponIndex.css');
  </style>